﻿@model PrjAssessModels.BaseModels.Project

@section scripts{
        <script type="text/javascript">
            $(function ()
            {
                var viewModelJs = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model))';
                var MaterialBuryItem;
                var viewModelMaterialBuryItem = {
                    'MaterialBurys': {
                        create: function (options) {
                            MaterialBuryItem = ko.mapping.fromJS(options.data);
                            //MaterialBuryItem.contentName = ko.observable(MaterialBuryItem.ContentName());
                            MaterialBuryItem.MaterialTotal = ko.computed(function () { try { return (parseFloat(this.MaterialPrice()) * parseFloat(this.Number())).toFixed(2) } catch (e) { return 0; }; }, MaterialBuryItem);
                            MaterialBuryItem.BuryTotal = ko.computed(function () { try { return (parseFloat(this.BuryPrice()) * parseFloat(this.Number())).toFixed(2) } catch (e) { return 0; }; }, MaterialBuryItem);
                            return MaterialBuryItem;
                        }
                    }
                };
                var viewModel = ko.mapping.fromJSON(viewModelJs, viewModelMaterialBuryItem);
                //---------------------添加项---------------------
                viewModel.addMaterialItem = function ()
                {

                    var item = {
                        PrjId: viewModel.PrjId(),
                        ContentName: "新的分项内容",
                        Method: "新的规格方法",
                        Para: 0,
                        Number: 0,
                        MaterialPrice: 0,
                        BuryPrice: 0,
                    };
                    var itemVm = ko.mapping.fromJS(item);
                    itemVm.MaterialTotal = ko.computed(function () { try { return (parseFloat(this.MaterialPrice()) * parseFloat(this.Number())).toFixed(2) } catch (e) { return 0; }; }, itemVm);
                    itemVm.BuryTotal = ko.computed(function () { try { return (parseFloat(this.BuryPrice()) * parseFloat(this.Number())).toFixed(2) } catch (e) { return 0; }; }, itemVm);
                    
                    viewModel.MaterialBurys.push(itemVm);
                }.bind(viewModel);
                //---------------------删除项---------------------
                viewModel.removeMaterialItem = function (item)
                {
                    viewModel.MaterialBurys.remove(item);
                }.bind(viewModel);
                //---------------------end删除项---------------------
                viewModel.MaterialSum = ko.computed(
                    function ()
                    {
                        var sum = 0;
                        var array = viewModel.MaterialBurys();
                        $.each(array, function (index, item) {
                            sum += parseFloat(item.MaterialTotal());
                        }
                        );
                        sum = sum * viewModel.PrjExtent.MaterialPurchaseRatio();
                        return parseFloat(sum.toFixed(2));
                    }
                    , viewModel);
                viewModel.BurySum = ko.computed(
                    function ()
                    {
                        var sum = 0;
                        var array = viewModel.MaterialBurys();
                        $.each(array, function (index, item)
                        {
                            sum += parseFloat(item.BuryTotal());
                        }
                        );
                        sum = sum * 1;
                        return parseFloat(sum.toFixed(2));
                    }, viewModel);
                //材料埋设总费用
                viewModel.MaterialBurySum = ko.computed(function () {
                    return (parseFloat(viewModel.BurySum()) + parseFloat(viewModel.MaterialSum())).toFixed(2);
                }, viewModel);



                ko.applyBindings(viewModel);


                //Form Submit
                $('#myForm').submit(function (event) {

                    event.preventDefault();
                    var jsonData = ko.toJSON(viewModel);
                    var url = '@Url.Action("SaveAssess","ReadAssess")';
                    $.post(url, { 'prjJson': jsonData },
                        function (data) {
                            if (data = 1) {
                                document.location.href = '@Url.Action("DisplayWorks","ReadAssess")';
                            }
                            else {
                                alert('Err!');

                            }
                        });
                    return false;
                });
                //上一步
                $('.preview').click(function (event)
                {
                    event.preventDefault();
                    var jsonData = ko.toJSON(viewModel);
                    var url = '@Url.Action("SaveAssess","ReadAssess")';
                    $.post(url, { 'prjJson': jsonData },
                        function (data) {
                            if (data = 1) {
                                document.location.href = '@Url.Action("Display","ReadAssess")';
                            }
                            else {
                                alert('Err!');

                            }
                        });
                }
                );
                $('.next').click(function (event)
                {
                    $('#submit').trigger('click');
                });
            })
            //style="width:90%;margin:0px auto;"
        </script>
}
<br />
<div class="container">
    <ol class="breadcrumb">
        <li><a href="#" class="preview">1.填写项目基本信息</a></li>
        <li class="active">2.填写项目材料埋设明细</li>
        <li><a href="#" class="next">3.填写项目工作量明细</a></li>
    </ol>

        @using (Html.BeginForm("SaveMertialBury", "ReadAssess", FormMethod.Post, new { id = "myForm", enctype = "multipart/form-data" }))
        {
           
            <fieldset>
                <legend>材料埋设明细</legend>
                <table class="table table-bordered">
                    <thead>
                        <tr style="background-color: #169dd8;color:#fff">
                            <th style="width: 15%; text-align: center;">分项内容</th>
                            <th style="width: 15%; text-align: center;">规格方法</th>
                            <th style="width: 10%; text-align: center;">数量(个)</th>
                            <th style="width: 10%; text-align: center;">材料单价(￥)</th>
                            <th style="width: 12%; text-align: center;">材料费用(￥)</th>
                            <th style="width: 10%; text-align: center;">埋设单价(￥)</th>
                            <th style="width: 12%; text-align: center;">埋设费用(￥)</th>
                            <th style="width: 10%; text-align: center;">参数(m)</th>
                            <th style="width: 5%; text-align: center;">*</th>
                        </tr>
                    </thead>
                   
                    <tbody>
                        <!-- ko foreach: MaterialBurys -->
                        <tr>
                            <td>
                                <div class="input-group">
                                    <input required="required" data-bind="value: ContentName" placeholder="分项内容" name="ContentName" class="form-control" type="text" />
                                    <span class="sr-only"></span>
                                </div>


                            </td>
                            <td>
                                <div class="input-group">
                                    <input required="required" data-bind="value: Method" class="form-control" type="text" />
                                    <span class="sr-only"></span>
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input required data-bind="value: Number" type="number" class="text-danger form-control" />
                                    <span class="sr-only">个</span>
                                </div>

                                <td>
                                    <div class="input-group">
                                        <input required data-bind="value: MaterialPrice" type="number" class="form-control" />
                                        <span class="sr-only">￥</span>
                                    </div>
                                </td>
                            <td>
                                <div class="input-group">
                                    <input required class="text-primary form-control" readonly="readonly" data-bind="value: MaterialTotal" type="number" />
                                    <span class="sr-only"></span>
                                </div>
                            </td>


                            <td>
                                <div class="input-group">
                                    <input required data-bind="value: BuryPrice" type="number" class="form-control" />
                                    <span class="sr-only">￥</span>
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input required class="text-primary form-control" readonly="readonly" data-bind="value: BuryTotal" type="number" />
                                    <span class="sr-only"></span>
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <input data-bind="value: Para" type="number" class="form-control" />
                                    <span class="sr-only"></span>
                                </div>
                            </td>
                            <td><a href='#' class="btn btn-sm btn-default" data-bind='click: $root.removeMaterialItem'>删除</a></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            <hr />
            <div class="row">
                <div class="col-lg-3">
                    <strong class="pull-left" ><a href="#" data-bind='click: addMaterialItem '>&nbsp;添加新项&nbsp;</a></strong>
                </div>
                <div class="col-lg-9">
                    <div class="pull-right">
                        <span class="text-muted">材料费用:</span>
                        <strong class="text-info" data-bind="text: MaterialSum"></strong>&nbsp;
                        <span class="text-muted">埋设费用:</span>
                        <strong class="text-info" data-bind="text: BurySum"></strong>&nbsp;
                        <span class="text-muted">埋设材料费用总计:</span>
                        <strong class="text-info" data-bind="text: MaterialBurySum"></strong>&nbsp;
                    </div>
                </div>
            </div>
            </fieldset>
            <br />
            <div class="form-group">
                <div class="row">
                    <div class="col-lg-offset-9 col-lg-3">
                        <div class="pull-right">
                             <a class="btn btn-primary preview" href="#" >上一步</a>&nbsp;
                             <input type="submit" id="submit" class="btn  btn-primary" value="下一步" />&nbsp;
                             <a class="btn btn-danger" href="#">取 消</a>&nbsp;
                        </div>
                      
                    </div>
                </div>

            </div>
        }
</div>
